<template>

    <div id="useTime" style="width:400px; height:400px;" >
        使用时长
    </div>
</template>
<script>
    // 导入echarts
    // 思路：
    // 01 mounted生命周期初始echarts实例 timeChart 
    // 02 使用 setting传入的数据 更新图表
    // 03 option 定义在data中,series[0].data 来自setting的数据
    import * as echarts from 'echarts'
    export default {
        props:{
            // 获取父组件的数据
            setting:{
                type:Object,
                default(){return {}}
            }
        },
        data(){
            return {
                timeChart:null,
                // 定义options
                option:{
                    title:{text:""},
                    tooltip:{},
                    xAxis:{data:["1~30秒","30秒~1分","1~3分","3~10分","10-30分"]},
                    yAxis:{},
                    series:[
                        {name:"timeuse",type:"bar",data:[this.setting.time1,this.setting.time2,this.setting.time3,this.setting.time4,this.setting.time5]}
                    ]
                }
            }
        },
        mounted(){
            // 创建时间使用时长图表
            this.timeChart  = echarts.init(document.getElementById("useTime"))
            // 更新数据
            this.timeChart.setOption(this.option);
        }
    }
</script>